@segmented-prefix-cls: segmented;

.segmented-disabled-item() {
    &,
    &:hover,
    &:focus {
        color: fade(#000, 25%);
        cursor: not-allowed;
    }
}

.segmented-item-selected() {
    background-color: white;
    box-shadow: 0px 4px 16px 0px rgba(var(--color-black), 0.08);
}

.@{segmented-prefix-cls} {
    display: inline-flex;
    padding: 2px;
    height: 32px;
    width: 100%;
    border-radius: 6px;
    background-color: rgb(var(--grey-50));
    box-sizing: border-box;

    &-group {
        position: relative;
        display: flex;
        align-items: stretch;
        justify-items: flex-start;

        width: 100%;
        border-radius: 2px;
    }

    &-item {
        position: relative;
        height: 100%;
        padding: 4px 10px;
        border-radius: 4px;
        height: 100%;
        flex: 1;
        flex-grow: 1;
        flex-shrink: 1;
        box-sizing: border-box;

        color: rgba(var(--color-black));
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        font-size: 13px;

        &-selected {
            .segmented-item-selected();
            color: rgba(var(--color-black));
        }

        &:hover,
        &:focus {
            color: rgba(var(--color-black));
        }

        &-disabled {
            .segmented-disabled-item();
        }

        &-label {
            z-index: 2;
            line-height: 20px;
        }

        &-input {
            position: absolute;
            top: 0;
            left: 0;

            width: 0;
            height: 0;
            opacity: 0;
            pointer-events: none;
        }
    }

    // disabled styles
    &-disabled &-item,
    &-disabled &-item:hover,
    &-disabled &-item:focus {
        .segmented-disabled-item();
    }

    &-thumb {
        .segmented-item-selected();

        position: absolute;
        box-sizing: border-box;
        width: 0;
        height: 100%;
        border-radius: 4px;
        padding: 4px 0;
    }

    // transition effect when `enter-active`
    &-thumb-motion-appear-active,
    &-thumb-motion-enter-active {
        transition:
            transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
            width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        will-change: transform, width;
    }

    &-rtl {
        direction: rtl;
    }
}
